import { View, Text, Image } from '@tarojs/components'
import { useEffect, useState } from 'react'
import Taro from '@tarojs/taro'


import './index.less'

interface Props {
  children?: React.ReactNode | React.ReactNode[]
}

export default function BasicNavbar({ children }: Props) {
  const [navBarHeight, setNavBarHeight] = useState(0)
  const [navStatusBarHeight, setNavStatusBarHeight] = useState(0)

  useEffect(() => {
    getStatusBarHeight()
  }, [])

  async function getStatusBarHeight() {
    const { statusBarHeight = 0 } = await Taro.getSystemInfo()
    setNavBarHeight(statusBarHeight + 43)
    setNavStatusBarHeight(statusBarHeight);
  }

  return (
    <View className='personelNavbar' style={{ height: `${navBarHeight}px` }}>
      <View className='navbar' style={{ height: `${navStatusBarHeight}px` }}>
        {children}
      </View>
    </View>
  )
}
